<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            margin: 20px auto;
            width: 1200px;
            height: 800px;
        }
        thead{
            background-color:rgb(241, 243, 242);
        }
        tbody img{
            width: 100px;
            height: 100px;
        }
        th,td{
            width: 200px;
            height: 50px;
        }
        table{
            border: 2px solid whitesmoke;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>/ 购物车</p>
        <table style="text-align: center;">
           <thead>
            <tr>
                <th>选中</th>
                <th>图片</th>
                <th>单价</th>
                <th>个数</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
           </thead>
           <tbody>
            <!-- <tr>
                <td><input type="checkbox"></td>
                <td><img src="./img/火龙果.png"></td>
                <td>6</td>
                <td>
                    <button style="width: 50px; height: 30px;">-</button>
                    <input type="text" value="2" style="width: 50px; height: 25px; text-align: center;">
                    <button style="width: 50px; height: 30px;">+</button>
                </td>
                <td>12</td>
                <td><button style="width: 50px; height: 30px; background-color: red; border: none; color: white;">删除</button></td>
            </tr> -->
           </tbody>
           <tfoot>
            <tr>
                <td><input type="checkbox" class="qx">   全选</td>
                <td></td>
                <td></td>
                <td></td>
                <td>总价：￥<span style="font-size: 40px; color: blueviolet;" class="zj"></span></td>
                <td><button style="width: 80px; height: 30px; background-color: blue; color: white; border: none;">结算(<font class="sl">32</font>)</button></td>
            </tr>
           </tfoot> 
        </table>
    </div>
</body>
</html>
<script src="./data.json"></script>
<script>
    var dataArr= [
      {
        id: 1,
        icon: './img/火龙果.png',
        isChecked: true,
        num: 2,
        price: 6,
      },
      {
        id: 2,
        icon: './img/荔枝.png',
        isChecked: false,
        num: 7,
        price: 20,
      },
      {
        id: 3,
        icon: './img/榴莲.png',
        isChecked: false,
        num: 3,
        price: 40,
      },
      {
        id: 4,
        icon: './img/鸭梨.png',
        isChecked: true,
        num: 10,
        price: 3,
      },
      {
        id: 5,
        icon: './img/樱桃.png',
        isChecked: false,
        num: 20,
        price: 34,
      },
 ]
    var tbody=document.querySelector('tbody')
    var qx=document.querySelector('.qx')
    function render(){
        let strArr=dataArr.map((item,index)=>{
            return `
            <tr data-id="${index}">
                <td><input type="checkbox" ${item.isChecked?"checked":""}></td>
                <td><img src="${item.icon}"></td>
                <td>${item.price}</td>
                <td>
                    <button style="width: 50px; height: 30px;" class="jian">-</button>
                    <input type="text" value="2" style="width: 50px; height: 25px; text-align: center;" value="${item.num}">
                    <button style="width: 50px; height: 30px;" class="jia">+</button>
                </td>
                <td>${item.price*item.num}</td>
                <td><button style="width: 50px; height: 30px; background-color: red; border: none; color: white;" class="del">删除</button></td>
            </tr>
            `
        }).join("")
        tbody.innerHTML=strArr
        qx.checked=dataArr.every(ele=>ele.isChecked==true)
        const newStr=dataArr.filter(ele=>ele.isChecked===true)
        const sl=document.querySelector('.sl')
        const zj=document.querySelector('.zj')
        const tatalCount=newStr.reduce((prey,item)=>prey+item.num,0)
        const tatalPrice=newStr.reduce((prey,item)=>prey+item.price*item.num,0)
        sl.innerHTML=tatalCount
        zj.innerHTML=tatalPrice.toFixed(2)
    }
    render()
    tbody.addEventListener('click',function(e){
        var id=e.target.parentNode.parentNode.dataset.id
        if(e.target.className=='del'){
            dataArr.splice(id,1)
            render()
        }
        if(e.target.className=='jian'){
            if(dataArr[id].num>1){
                dataArr[id].num--
                render()
            }else{
                dataArr[id].num=1
            }
        }
        if(e.target.className=='jia'){
            dataArr[id].num++
            render()
        }
        if(e.target.tagName=='INPUT'){
            dataArr[id].isChecked=e.target.checked
            render()
        }
    })
    qx.addEventListener('click',function(){
        
        dataArr.forEach(ele=>{
            ele.isChecked=this.checked
        })
        render()
    })
</script>